<template>
  <div class="consultation-detail">
    <!-- <consultationHeader title="资讯详情" crumbs="主页,资讯列表,资讯详情" /> -->
    <webHader :title="t(title)" :crumbs="``" :backgroundImageUrl="headerBg" />

    <div class="content" v-loading="loading">
      <div class="left">
        <div v-if="html" v-html="html"></div>
        <Empty v-else :title="$t('noDataAvailable')" />
      </div>
    </div>
  </div>
</template>

<script setup>
// 配置此页面只在客户端渲染
definePageMeta({
  ssr: false,
});
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { GetCompanyInfoOfType } from "~/apis/web";

const { $navigate } = useNuxtApp();
// 公司概况 webSite
// 联系我们 contactUs
// 隐私政策 privacyPolicy
// 用户协议 userAgreement
const route = useRoute();
const slug = route.params.slug;
const html = ref(null);
const title = ref(null);
const loading = ref(false);

const getHtml = async () => {
  loading.value = true;

  try {
    let agreementType;
    let titleKey;

    // 根据slug确定参数
    if (slug === "webSite") {
      agreementType = 0;
      titleKey = "companyIntroduction.webSite";
    } else if (slug === "contactUs") {
      agreementType = 1;
      titleKey = "companyIntroduction.contactUs";
    } else if (slug === "userAgreement") {
      agreementType = 2;
      titleKey = "companyIntroduction.userAgreement";
    } else if (slug === "privacyPolicy") {
      agreementType = 3;
      titleKey = "companyIntroduction.privacyPolicy";
    }
    // 设置标题
    title.value = t(titleKey);
    // 调用API
    const res = await GetCompanyInfoOfType({ agreementType });
    // 检查响应状态
    if (res && res.code === 0 && res.data && res.data.agreementContent) {
      html.value = res.data.agreementContent;
    }
  } catch (error) {
    // 处理网络错误或其他异常
    html.value = null;
    title.value = title.value;
  } finally {
    // 确保loading状态被重置
    loading.value = false;
  }
};
getHtml();

import headerBg from "~/assets/web/consultation-header-bg.png";
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  padding: 24px 104px 70px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 auto;
  .right {
    width: 25%;
    .information-from {
      padding: 30px;
      box-sizing: border-box;
      margin-bottom: 20px;
      width: 100%;
      background-color: #fff;
      .title {
        width: 100%;
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 14px;
        color: #656c7e;
        text-align: left;
        font-style: normal;
        text-transform: none;
        text-align: center;
      }

      .fillOutTheForm {
        background: var(--theme-gradient-bg);
        border-radius: 0px 0px 0px 0px;
        border: none;
        padding: 14px 0;
        box-sizing: border-box;
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        font-style: normal;
        text-transform: none;
        margin-top: 20px;
        cursor: pointer;
        width: 100%;
      }
    }

    .fileDownloads {
      padding: 20px 0;
      box-sizing: border-box;
      background-color: #fff;
      .title {
        font-family: PingFang HK, PingFang HK;
        font-weight: 400;
        font-size: 18px;
        color: #1e2021;
        text-align: left;
        font-style: normal;
        text-transform: none;
        position: relative;
        padding-left: 10px;
        box-sizing: border-box;
        padding: 0px 38px;
      }

      .title::after {
        width: 4px;
        height: 18px;
        // background: #EC4613;
        background: var(--theme-gradient-bg);
        border-radius: 0px 0px 0px 0px;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        content: "";
      }

      .listOfFiles {
        margin-top: 20px;
        box-sizing: border-box;
        border-top: 1px solid #e9e9e9;
        box-sizing: border-box;
        .listOfFiles-item {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 20px 20px 0 20px;
          box-sizing: border-box;
          .listOfFiles-item-left {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            .svg-style {
              margin-right: 15px;
              width: 22px;
              height: 22px;
            }

            .file-name {
              font-family: PingFang HK, PingFang HK;
              font-weight: 400;
              font-size: 16px;
              color: #1e2021;
              flex: 1;
            }
          }
        }
      }
    }
  }

  .left {
    flex: 1;
    margin-right: 20px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    padding: 56px 30px;
    box-sizing: border-box;
    .left-top {
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 30px;
      color: #1e2021;
      text-align: left;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .left-time {
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 12px;
      color: #656c7e;
      line-height: 13px;
      text-align: left;
      margin: 20px 0 43px 0;
    }
    .left-img {
      width: 100%;
      border: 1px solid red;
      margin-bottom: 30px;
      img {
        width: 100%;
      }
    }
    .left-content {
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 16px;
      color: #1e2021;
      text-align: left;
      line-height: 30px;
    }
  }
}
</style>
